<template>
  <div class="questions" id="question-display">
    <div class="question-box" v-for="(question, id) in dataList" :key="id">
      <h1>✒</h1>
      <p v-for="(quiz, index) in question.quiz" :key="index">{{ quiz }}</p>
      <div class="question-buttons">
        <button
          class="question-button"
          v-for="(option, index) in question.options"
          :key="index"
          @click="checkAnswer(id, option, index + 1, question.correct)"
          :disabled="clicked.includes(option)"
        >
          {{ option }}
        </button>
      </div>
      <div
        class="answer-display"
        :class="answer[id] === 'Correct!' ? 'correct' : 'wrong'"
      >
        {{ answer[id] }}
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../utils/bus"
import { mapGetters } from "vuex"

export default {
  name: "Content",
  data() {
    return {
      score: 0,
      clicked: [],
      answer: [],
    }
  },
  mounted() {
    this.$store.dispatch("getDataList")
  },
  computed: {
    ...mapGetters(["dataList"]),
  },
  methods: {
    checkAnswer(id, option, optionIndex, correctIndex) {
      if (optionIndex === correctIndex) {
        this.score++
        this.clicked.push(option)
        bus.$emit("scoreHandler", this.score)
        this.answer[id] = "Correct!"
      } else {
        this.score--
        this.clicked.push(option)
        bus.$emit("scoreHandler", this.score)
        this.answer[id] = "Wrong!"
      }
    },
  },
}
</script>

<style scoped>
.questions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.question-box {
  background-color: rgb(21, 21, 21);
  margin: 15px auto;
  width: 240px;
  color: rgb(230, 230, 230);
  border-radius: 10px;
  padding: 0 40px 10px 40px;
}
.question-box h1 {
  text-align: left;
  color: rgb(178, 65, 178);
}
.question-buttons {
  display: flex;
  flex-direction: row;
}

.question-button {
  margin: 5px auto;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
  background-color: rgb(75, 134, 111);
  color: white;
}
.question-button:disabled {
  background-color: rgb(97, 95, 95);
  color: rgb(158, 154, 154);
}
.answer-display {
  height: 50px;
  display: flex;
  justify-content: center;
  text-align: center;
}
.correct {
  color: rgb(211, 211, 117);
}
.wrong {
  color: rgb(211, 134, 117);
}
</style>
